home *** CD-ROM | disk | FTP | other *** search
/ InterCD 2001 May / may_2001.iso / intercd / root / Html / ^CutePage / data1.cab / IE4Gadget_Template / fadeselect.js < prev    next >
Encoding:
Text File  |  2000-05-12  |  13.1 KB  |  576 lines
  1.  
  2. var globalSelect;    
  3. var oldel
  4. var oldcss
  5. var q = 0;
  6.  
  7. function writeSelectBox(matrix, id, size, onchange, css, overCss,borderCss,doborder,cupborder,steps,msec) {
  8.     var d = window.document;
  9.  
  10.     var ie4 = (document.all != null);
  11.  
  12.     if (ie4) {
  13.  
  14.         var s = createIEString(matrix, id, size, onchange, css,overCss,doborder,cupborder,steps,msec);
  15.         document.write(s);        
  16.         initSelectBoxes(id,overCss,borderCss);
  17.  
  18.     }
  19.     
  20.     
  21.  
  22.     else {
  23.         document.write(createXString(matrix, id, size, onchange, css));
  24.         initSelectBoxes(id,overCss);
  25.     }
  26.     
  27.     
  28. }
  29.  
  30. function createIEString(matrix, id, size, onchange, css, overCss,doborder,cupborder,steps,msec) {
  31.     var str = "";
  32.     var str1="";
  33.     
  34.             html1     = matrix[0].html;
  35.             value1    = matrix[0].value;
  36.             css1      = matrix[0].css;
  37.             selected1 = matrix[0].selected;
  38.             
  39.         
  40.             str1 += '<div class="'+id+'option"';
  41.             if (value1 != null)
  42.                 str1+= ' value="' + value1 + '"';
  43.             if (css1 != null)
  44.                 str1+= ' style="' + css1 + '"';
  45.             if (selected1 != null)
  46.                 str1+= ' selected';
  47.             str1 += '>\n';
  48.             
  49.         
  50.             str1 += html1;
  51.         
  52.             str1 += '</div>\n';
  53.     
  54.         
  55.         str += '<span class="'+id+'select"';
  56.  
  57.         if (size == null)
  58.             size = 1;
  59.         str += ' size="' + size + '"';    
  60.         if (id != null)
  61.             str += ' id="' + id + '"';
  62.         if (onchange != null)
  63.             str += ' onchange="' + onchange + '"';
  64.         if (css != null)
  65.             str += ' style="' + css + '"';
  66.         str += '>\n';
  67.     
  68.         str += '<table class="'+id+'selectTable" cellspacing="0" cellpadding="0"\n';
  69.         str += ' onclick="toggleDropDown(this.parentElement,\''+steps+'\',\''+msec+'\')">\n';
  70.         str += '<tr>\n';
  71.         str += '<td class="'+id+'selected">'+str1+'</td>\n';
  72.         str += '<td align="CENTER" valign="MIDDLE" class="'+id+'button"\n';
  73.         str += ' onmousedown="this.style.border=\''+doborder+'\'"\n';
  74.         str += ' onmouseup="this.style.border=\''+cupborder+'\'">\n';
  75.         str += '<span style="position: relative; left: 0; top: -2; width: 100%;">6</span></td>\n';
  76.         str += '</tr>\n';
  77.         str += '</table>\n';
  78.         
  79.     
  80.         str += '<div class="'+id+'dropDown" onclick="optionClick(\''+id+'\', \''+overCss+'\',\''+steps+'\',\''+msec+'\')" onmouseover="optionOver(\''+id+'\', \''+overCss+'\')" onmouseout="optionOut(\''+id+'\', \''+overCss+'\')">\n';
  81.         
  82.         for (var i=0; i<matrix.length; i++) {
  83.             html     = matrix[i].html;
  84.             value    = matrix[i].value;
  85.             css      = matrix[i].css;
  86.             selected = matrix[i].selected;
  87.             
  88.         
  89.             str += '<div class="'+id+'option"';
  90.             if (value != null)
  91.                 str += ' value="' + value + '"';
  92.             if (css != null)
  93.                 str += ' style="' + css + '"';
  94.             if (selected != null)
  95.                 str += ' selected';
  96.             str += '>\n';
  97.             str += html;        
  98.             str += '</div>\n';
  99.         }
  100.     
  101.     
  102.         str += '</div>\n';
  103.         str += '</span>\n';
  104.         
  105.         
  106.  
  107.         
  108.     return str;
  109. }
  110.  
  111. function createXString(matrix, id, size, onchange, css) {
  112.  
  113.     var str = '<form>\n';
  114.     str += '<select';
  115.     if (size == null)
  116.         size = 1;
  117.     str += ' size="' + size + '"';    
  118.     if (id != null)
  119.         str += ' id="' + id + '"';
  120.     if (onchange != null)
  121.         str += ' onchange="' + onchange + '"';
  122.     str += '>\n';
  123.  
  124.     for (var i=0; i<matrix.length; i++) {
  125.         html     = matrix[i].html;
  126.         value    = matrix[i].value;
  127.         css      = matrix[i].css;
  128.         selected = matrix[i].selected;
  129.         str += '\n<option';
  130.         if (value != null)
  131.             str += ' value="' + value + '"';
  132.         if (selected != null)
  133.             str += ' selected';
  134.         str += '>';
  135.         str += stripTags(html);
  136.         str += '</option>\n';
  137.     }
  138.     str += '\n</select>\n';
  139.     str += '</form>\n';
  140.  
  141.     return str;
  142. }
  143.  
  144. function stripTags(str) {
  145.     var s = 0;
  146.     var e = -1;
  147.     var r = "";
  148.  
  149.     s = str.indexOf("<",e);    
  150.  
  151.     do {
  152.         r += str.substring(e + 1,s);
  153.         e = str.indexOf(">",s);
  154.         s = str.indexOf("<",e);
  155.     }
  156.     while ((s != -1) && (e != -1))
  157.  
  158.     r += str.substring(e + 1,str.length);
  159.  
  160.     return r;
  161. }
  162.  
  163. function Option(html, value, css, selected) {
  164.     this.html = html;
  165.     this.value = value;
  166.     this.css = css;
  167.     this.selected = selected;
  168. }
  169.  
  170. function initSelectBox(el,id,overCss,borderCss) {
  171.     
  172.     
  173.     var size = el.getAttribute("size");
  174.  
  175.     el.options = el.children[1].children;
  176.     el.selectedIndex = findSelected(el);    
  177.     el.remove = new Function("i", "int_remove(this,i)");
  178.     el.item   = new Function("i", "return this.options[i]");
  179.     el.add    = new Function("e", "i", "int_add(this, e, i,id)");    
  180.     el.options[el.selectedIndex].selected = true;
  181.  
  182.     dropdown = el.children[1];
  183.  
  184.     if (size != null) {
  185.         if (size > 1) {
  186.             el.size = size;
  187.             dropdown.style.zIndex = 0;
  188.             initSized(el,borderCss);
  189.         }
  190.         else {
  191.             el.size = 1;
  192.             dropdown.style.zIndex = 99;
  193.             if (dropdown.offsetHeight > 200) {
  194.                 dropdown.style.height = "200";
  195.                 dropdown.style.overflow = "auto";
  196.             }
  197.         }
  198.     }
  199.     
  200.     
  201. }
  202.  
  203. function int_remove(el,i) {
  204.     if (el.options[i] != null)
  205.         el.options[i].outerHTML = "";
  206. }
  207.  
  208. function int_add(el, e, i) {
  209.     var html = "<div class='"+id+"option' noWrap";
  210.     if (e.value != null)
  211.         html += " value='" + e.value + "'";
  212.     if (e.style.cssText != null)
  213.         html += " style='" + e.style.cssText + "'";
  214.     html += ">";
  215.     if (e.text != null)
  216.         html += e.text;
  217.     html += "</div>"
  218.  
  219.     if ((i == null) || (i >= el.options.length))
  220.         i = el.options.length-1;
  221.  
  222.     el.options[i].insertAdjacentHTML("AfterEnd", html);
  223. }
  224.     
  225. function initSized(el,borderCss) {
  226.     var h = 0;
  227.     el.children[0].style.display = "none";
  228.  
  229.     dropdown = el.children[1];
  230.     dropdown.style.visibility = "visible";
  231.  
  232.     if (dropdown.children.length > el.size) {
  233.         dropdown.style.overflow = "auto";
  234.         for (var i=0; i<el.size; i++) {
  235.             h += dropdown.children[i].offsetHeight;
  236.         }
  237.  
  238.         if (dropdown.style.borderWidth != null) {
  239.             dropdown.style.pixelHeight = h + 4; 
  240.         }
  241.  
  242.         else
  243.             dropdown.style.height = h;
  244.  
  245.     }
  246.  
  247.     dropdown.style.border = borderCss;
  248.  
  249.  
  250.     el.style.height = dropdown.style.pixelHeight;
  251. }
  252.  
  253. function copySelected(el) {
  254.     var selectedIndex = findSelected(el);
  255.  
  256.     selectedCell = el.children[0].rows[0].cells[0];
  257.     selectedDiv  =     el.children[1].children[selectedIndex];
  258.     
  259.     selectedCell.innerHTML = selectedDiv.outerHTML;
  260. }
  261.  
  262. function findSelected(el) {
  263.     var selected = null;    
  264.     
  265.     ec = el.children[1].children;    
  266.     var ecl = ec.length;
  267.     
  268.     for (var i=0; i<ecl; i++) {
  269.         if (ec[i].getAttribute("selected") != null) {
  270.             if (selected == null) {    
  271.                 selected = i;
  272.             }
  273.             else
  274.                 ec[i].removeAttribute("selected");    
  275.         }
  276.     }
  277.     if (selected == null)
  278.         selected = 0;    
  279.  
  280.     return selected;
  281. }
  282.  
  283. function toggleDropDown(el,steps,msec) {
  284.     if(oldel!=null)
  285.     {
  286.     if (oldel==el)
  287.     {
  288.     if (el.size == 1) {
  289.         dropDown = el.children[1];
  290.         
  291.         if (dropDown.style.visibility == "")
  292.             dropDown.style.visibility = "hidden";
  293.             
  294.         if (dropDown.style.visibility == "hidden")
  295.             showDropDown(dropDown,steps,msec);
  296.         else
  297.             hideDropDown(dropDown,steps,msec);
  298.     }
  299.     }
  300.     else
  301.     {
  302.         
  303.         if (oldel.size == 1) {
  304.             alert(oldel.id)
  305.             dropDown = oldel.children[1];
  306.         
  307.             if (dropDown.style.visibility == "")
  308.                 dropDown.style.visibility = "hidden";
  309.             
  310.             if (dropDown.style.visibility == "hidden")
  311.                 showDropDown(dropDown,steps,msec);
  312.             else
  313.                 hideDropDown(dropDown,steps,msec);
  314.                 
  315.             }
  316.         if (el.size == 1) {
  317.             dropDown = el.children[1];
  318.         
  319.             if (dropDown.style.visibility == "")
  320.                 dropDown.style.visibility = "hidden";
  321.             
  322.             if (dropDown.style.visibility == "hidden")
  323.                 showDropDown(dropDown,steps,msec);
  324.             else
  325.                 hideDropDown(dropDown,steps,msec);
  326.                 
  327.             }
  328.             
  329.         oldel=el
  330.     }
  331.     }
  332.     else
  333.     {
  334.     if (el.size == 1) {
  335.             dropDown = el.children[1];
  336.         
  337.             if (dropDown.style.visibility == "")
  338.                 dropDown.style.visibility = "hidden";
  339.             
  340.             if (dropDown.style.visibility == "hidden")
  341.                 showDropDown(dropDown,steps,msec);
  342.             else
  343.                 hideDropDown(dropDown,steps,msec);
  344.                 
  345.             }
  346.     oldel=el
  347.     
  348.     }
  349. }
  350.  
  351. function optionClick(id,overCss,steps,msec) {
  352.     tagid = id;
  353.     
  354.     tagcss=id+"option"
  355.     
  356.     el = getReal(window.event.srcElement, "className", tagcss);
  357.  
  358.     if (el.className == tagcss) {
  359.         dropdown  = el.parentElement;
  360.         selectBox = dropdown.parentElement;
  361.         
  362.         oldSelected = dropdown.children[findSelected(selectBox)]
  363.         if(oldSelected != el) {
  364.             oldSelected.removeAttribute("selected");
  365.             el.setAttribute("selected", 1);
  366.             selectBox.selectedIndex = findSelected(selectBox);
  367.         }
  368.  
  369.         if (selectBox.onchange != null) {    
  370.             if (selectBox.id != "") {        
  371.                 eval(selectBox.onchange.replace(/this/g, selectBox.id));
  372.             }
  373.             else {
  374.                 globalSelect = selectBox;
  375.                 eval(selectBox.onchange.replace(/this/g, "globalSelect"));
  376.             }
  377.         }
  378.         
  379.         var selectedIndex = findSelected(selectBox);
  380.         selectedCell = selectBox.children[0].rows[0].cells[0];
  381.         selectedDiv  = selectBox.children[1].children[selectedIndex];
  382.         
  383.         
  384.         selectedCell.innerHTML = selectedDiv.innerText;
  385.         selectedCell.style.cssText=oldcss;
  386.         toggleDropDown(selectBox,steps,msec);
  387.         highlightSelected(selectBox, true,overCss);
  388.     }
  389. }
  390.  
  391. function optionOver(id,overCss) {
  392.     tagcss=id+"option"
  393.  
  394.     var toEl = getReal(window.event.toElement, "className", tagcss);
  395.     var fromEl = getReal(window.event.fromElement, "className", tagcss);
  396.     if (toEl == fromEl) return;
  397.     var el = toEl;
  398.     
  399.     if (el.className == tagcss) {
  400.         oldcss= el.children[0].children[0].style.cssText;
  401.         if (el.backupCss == null)
  402.         {
  403.             el.backupCss = el.children[0].children[0].style.cssText;
  404.         }
  405.         highlightSelected(el.parentElement.parentElement, false,overCss);
  406.         el.style.cssText = el.backupCss + "; " + overCss;
  407.         el.children[0].children[0].style.cssText=el.style.cssText
  408.         this.highlighted = true;
  409.     }
  410. }
  411.  
  412. function optionOut(id,overCss) {
  413.     tagcss=id+"option"
  414.     var toEl = getReal(window.event.toElement, "className", tagcss);
  415.     var fromEl = getReal(window.event.fromElement, "className", tagcss);
  416.  
  417.     if (fromEl == fromEl.parentElement.children[findSelected(fromEl.parentElement.parentElement)]) {
  418.         if (toEl == null)
  419.             return;
  420.         if (toEl.className != tagcss)
  421.             return;
  422.     }
  423.     
  424.     if (toEl != null) {
  425.         if (toEl.className != tagcss) {
  426.             if (fromEl.className == tagcss)
  427.                 highlightSelected(fromEl.parentElement.parentElement, true,overCss);
  428.         }
  429.     }
  430.     
  431.     if (toEl == fromEl) return;
  432.     var el = fromEl;
  433.  
  434.     if (el.className == tagcss) {
  435.         if (el.backupCss != null)
  436.             el.style.cssText = el.backupCss;
  437.             el.children[0].children[0].style.cssText=el.style.cssText
  438.     }
  439.  
  440. }
  441.  
  442. function highlightSelected(el,add,overCss) {
  443.     var selectedIndex = findSelected(el);
  444.     
  445.     selected = el.children[1].children[selectedIndex];
  446.     
  447.     
  448.     if (add) {
  449.         if (selected.backupCss == null)
  450.             selected.backupCss = selected.children[0].children[0].style.cssText;
  451.         selected.style.cssText = selected.backupCss + "; " + overCss;
  452.         selected.children[0].children[0].style.cssText=selected.style.cssText
  453.     }
  454.     else if (!add) {
  455.         if (selected.backupCss != null)
  456.             selected.style.cssText = selected.backupCss;
  457.             selected.children[0].children[0].style.cssText=selected.style.cssText
  458.     }
  459. }
  460.  
  461.  
  462.  
  463. function hideDropDown(el,steps,msec) {
  464.     if (typeof(fade) == "function")
  465.         fade(el, false,steps,msec);
  466.     else
  467.         el.style.visibility = "hidden";
  468. }
  469.  
  470. function showDropDown(el,steps,msec) {
  471.     if (typeof(fade) == "function")
  472.         fade(el, true,steps,msec);
  473.     else if (typeof(swipe) == "function")
  474.         swipe(el, 2);
  475.     else
  476.         el.style.visibility = "visible";
  477. }
  478.  
  479. function initSelectBoxes(id,overCss,borderCss) {
  480.     var spans = document.all.tags("SPAN");
  481.     var selects = new Array();
  482.     var index = 0;
  483.     tagcss=id+"select";
  484.     for (var i=0; i<spans.length; i++) {
  485.         if (spans[i].className == tagcss)
  486.             selects[index++] = spans[i];
  487.     }
  488.     
  489.     for (var j=0; j<selects.length; j++) {
  490.         initSelectBox(selects[j],id,overCss,borderCss);
  491.     }    
  492. }
  493.  
  494. function getReal(el, type, value) {
  495.     temp = el;
  496.     if (value!="select")
  497.     {
  498.     while ((temp != null) && (temp.tagName != "BODY")) {
  499.         if (eval("temp." + type) == value) {
  500.             el = temp;
  501.             return el;
  502.         }
  503.         temp = temp.parentElement;
  504.     }
  505.     }
  506.     else
  507.     {
  508.     if((temp != null) && (temp.tagName != "BODY") && (temp.id!=""))
  509.      {
  510.         value=temp.id+value
  511.      }
  512.      
  513.     while ((temp != null) && (temp.tagName != "BODY")) {
  514.         if (eval("temp." + type) == value) {
  515.             alert(temp.id)
  516.             el = temp;
  517.         
  518.             return el;
  519.         }
  520.         temp = temp.parentElement;
  521.     
  522.     }
  523.     }
  524.     return el;
  525. }
  526.  
  527.  
  528. function hideShownDropDowns() {
  529.     
  530.     var el = getReal(window.event.srcElement, "className", "select");
  531.     var spans = document.all.tags("SPAN");
  532.     var selects = new Array();
  533.     var index = 0;
  534.     
  535.     strTemp="fadesteps"
  536.     strMesc="fademsec"
  537.  
  538.     for (var i=0; i<spans.length; i++) {
  539.         if ((spans[i].className.indexOf("select")) && (spans[i] != el)) {
  540.             dropdown = spans[i].children[1];
  541.             if ((spans[i].size == 1) && (dropdown.style.visibility == "visible"))
  542.                 selects[index++] = dropdown;
  543.                 }
  544.         }
  545.     
  546.     for (var j=0; j<selects.length; j++) {
  547.         idtemp=selects[j].parentElement.id
  548.         
  549.         
  550.         
  551.         hideDropDown(selects[j],eval(idtemp+strTemp),eval(idtemp+strMesc));
  552.         }
  553.         
  554.     
  555.     if (oldel!=null)
  556.     {
  557.     if (oldel.size == 1) {
  558.             dropDown = oldel.children[1];
  559.             idold=oldel.id
  560.             if (dropDown.style.visibility == "")
  561.                 dropDown.style.visibility = "hidden";
  562.             
  563.             if (dropDown.style.visibility == "hidden")
  564.                 showDropDown(dropDown,eval(idold+strTemp),eval(idold+strMesc));
  565.             else
  566.                 hideDropDown(dropDown,eval(idold+strTemp),eval(idold+strMesc));
  567.                 
  568.             }
  569.     }
  570.     oldel=null
  571.     
  572. }
  573.  
  574. if (document.all != null) {
  575. document.onclick = hideShownDropDowns;
  576. }